<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        position: absolute;
        display: flex;
        width: 100%;
        height: 100%;
    }

    #MainBox {
        display: flex;
        width: 100%;
        height: 100%;
    }

    .buttons {
        width: 200px;
        height: 200px;
        margin: auto;
        border-radius: 50%;
        display: inline-flex;
        color: #59c2c5;
        box-shadow: 24px 24px 36px rgba(0, 0, 0, 0.2), -24px -24px 36px rgba(255, 255, 255, 1);
        transition: all .2s ease-out;
    }

    .buttons:hover {
        cursor: pointer;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
        0 0 0 rgba(255, 255, 255, 0.8),
        inset 24px 24px 40px rgba(0, 0, 0, 0.1),
        inset -24px -24px 40px rgba(255, 255, 255, 1);
    }

    .buttons:hover .contents {
        width: 90px;
        height: 25px;
        font-size: 22px;
        text-shadow: 0 0 10px #59c2c5, 0 0 20px #59c2c5, 0 0 30px #59c2c5, 0 0 40px #59c2c5;
    }

    .contents {
        width: 100px;
        height: 30px;
        margin: auto;
        font-size: 24px;
        justify-content: center;
        text-align: center;
        transition: all .2s ease-out;
    }
</style>
<body>
<div id="MainBox">
    <div class=" buttons" onclick="sign()">
        <div class="contents">点击签到</div>
    </div>
</div>
</body>
<script>
    function sign() {
        $.ajax({
            url: '/sign/sign',
            method: 'get',
            data: {"type": '1'},
            success: function (data) {
                alert(data.message);
            }
        })
    }
</script>
</html>